import React, {Component} from 'react';
import commonConfig from "../../static/js/commonConfig";
import '../../static/scss/fileViewer/fileViewer.scss'
import ImageComponent from "./component/imageComponent";
import VideoComponent from "./component/videoComponent";
import AudioComponent from "./component/audioComponent";
import DocumentComponent from "./component/documentComponent";
import OtherFileComponent from "./component/otherFileComponent";

class FileViewerApp extends Component {

    state = {
        controller: '',
        id: '',
        dataList: {},
        navList: [],
        currentNav: '',
        fileList: {}
    }

    componentDidMount() {
        const {type, id, moduleType} = commonConfig.getUrlParams(this);
        this.setState({id, controller: type === 1 ? 'exploreProject' : 'prospectingProject'}, () => {
            if (moduleType === 'project') {
                this.getFileList();
            } else {
                this.getOtherFileList();
            }
        });
    }

    /*获取其它资料数据*/
    getOtherFileList() {
        const {id} = this.state;
        commonConfig.validateTokenLoadData(`otherFiles/get/${id}`, null, msg => {
            let {name, filesInfoList, bucketName} = msg.data;
            for (let i = 0; i < filesInfoList.length; i++) {
                let item = filesInfoList[i];
                item['bucketName'] = bucketName;
                item['name'] = item.name || item.fileName
            }
            let navList = [name];
            this.setState({
                dataList: {[navList[0]]: filesInfoList},
                navList,
                currentNav: navList.length > 0 ? navList[0] : ''
            }, () => {
                this.getCurrentNavData();
            });
        })
    }

    /*获取文件列表*/
    getFileList = () => {
        const {id, controller} = this.state;
        commonConfig.validateTokenLoadData(`${controller}/getProFiles/${id}`, null, msg => {
            const navList = Object.keys(msg);
            this.setState({dataList: msg, navList, currentNav: navList.length > 0 ? navList[0] : ''}, () => {
                this.getCurrentNavData();
            });
        });
    }

    /*导航点击事件*/
    navHandle = currentNav => {
        this.setState({currentNav}, () => {
            this.getCurrentNavData();
        });
    }

    /*获取当前导航模块的数据*/
    getCurrentNavData = () => {
        const {dataList, currentNav} = this.state;
        let msg = dataList[currentNav];
        let result = commonConfig.filterFilterReturnList(msg);
        this.setState({fileList: result});
    }

    render() {
        const {currentNav, navList, fileList} = this.state;

        let imageList = fileList['图片'] || [];
        let videoList = fileList['视频'] || [];
        let audioList = fileList['音频'] || [];
        let docList = fileList['文档'] || [];
        let otherFileList = fileList['其它'] || [];

        return (
            <>
                <div className="system_management_content_style file_viewer_module animate__animated animate__fadeIn">
                    <div className="navList">
                        <ul>
                            {navList.map((item, i) =>
                                <li key={i} className={currentNav === item ? 'active' : ''}
                                    onClick={this.navHandle.bind(this, item)}>{item}</li>
                            )}
                        </ul>
                    </div>
                    <div className="file_viewer_container">
                        {imageList.length > 0 ?
                            <div className="viewer_box">
                                <h3>图片文件</h3>
                                <div className="file_list_section">
                                    <ImageComponent imageList={imageList}/>
                                </div>
                            </div> : null}
                        {videoList.length > 0 ?
                            <div className="viewer_box">
                                <h3>视频文件</h3>
                                <div className="file_list_section">
                                    <VideoComponent videoList={videoList}/>
                                </div>
                            </div> : null}
                        {audioList.length > 0 ?
                            <div className="viewer_box">
                                <h3>音频文件</h3>
                                <div className="file_list_section">
                                    <AudioComponent audioList={audioList}/>
                                </div>
                            </div> : null}
                        {docList.length > 0 ?
                            <div className="viewer_box">
                                <h3>文档文件</h3>
                                <div className="file_list_section">
                                    <DocumentComponent docList={docList}/>
                                </div>
                            </div> : null}
                        {otherFileList.length > 0 ?
                            <div className="viewer_box">
                                <h3>其它文件</h3>
                                <div className="file_list_section">
                                    <OtherFileComponent otherFileList={otherFileList}/>
                                </div>
                            </div> : null}
                    </div>
                </div>
            </>
        )
    }
}

export default FileViewerApp